<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Nombre</title>

        <?php
        echo $html->css('estilo');
        echo $this->Html->script('jquery-1.6.2.min');
        echo $this->Html->script('jquery-ui-1.8.12.custom.min');
        echo $this->Html->script('googleMap');
        echo $this->Html->script('http://maps.google.com/maps/api/js?sensor=false');
        echo $this->Html->script('jquery.blockUI');
        ?>

        <?php echo $scripts_for_layout ?>
    </head>

    <body>




        <div id="wrap">

            <div id="reg_usuario" style="display: none">
                <div class="reg_fila">
                    <div class="reg_titulo">Ingrese sus datos</div>                                        
                </div>
                <div class="reg_fila">
                    <div class="reg_label">Nombre:</div>
                    <div class="reg_imput"><input type="text" /></div>                    
                    <div class="reg_error" style="display: none">Error: Nombre no valido</div>
                </div>
                
                
                
                <div class="reg_fila">
                    <div class="reg_label">E-mail:</div>
                    <div class="reg_imput"><input type="text" /></div>
                    <div class="reg_error" style="display: none">Error: E-mail no validor</div>
                </div>
                
                <div class="reg_fila">
                    <div class="reg_label">Elige tu contraseña:</div>
                    <div class="reg_imput"><input type="password" /></div>
                    
                </div>
                
                <div class="reg_fila">
                    <div class="reg_label">Repite tu contraseña:</div>
                    <div class="reg_imput"><input type="password" /></div>
                    <div class="reg_error" style="display: none">Error: Las contraseñas no coinciden</div>
                </div>
                
                <div class="reg_fila">
                    <div class="reg_btn">
                        <button id="aceptar_reg">Aceptar</button>
                        <button id="cancelar_reg">Cancelar</button>
                    </div>
                </div>
                
            </div>
            
            

            <div class="block_header">
                <div class="imagen_izq"></div>
            </div>

            <div class="menu_superior">

                <div class="bloques_opciones" id="bloque_login" style="display: none">
                    <div class="titulo_login">
                        Ingrese sus Datos
                    </div>

                    <div id="error_login" class="fila_login" style="display: none">
                        <div class="error_login">DATOS INVALIDOS</div>
                    </div>
                    <div class="fila_login">
                        <div class="label_login"><span>Nombre: </span> </div>
                        <div class="input_login"><input id="input_nombre" type="text" value=""/></div>
                    </div>
                    <div class="fila_login">
                        <div class="label_login"><span>Contraseña: </span> </div>
                        <div class="input_login"><input id="input_pass"  type="text" value=""/></div>

                    </div>
                    <div class="fila_login">
                        <div class="button_login"><button> Entrar </button></div>
                    </div>
                    <div class="fila_login">
                        <div class="recordar_login">
                            <a>Recordar Contraseña</a>
                        </div>
                    </div>
                </div>



                <div class="bloques_opciones" id="bloque_buscar" style="display: none">

                    <div class="fila_buscar">
                        <div class="label_buscar_corto">Raza: </div>
                        <div class="select_buscar">
                            <select>
                                <option value="volvo">American Staffordsire Terrier</option>
                                <option value="saab">Saab</option>
                                <option value="mercedes">Mercedes</option>
                                <option value="audi">Audi</option>
                            </select>
                        </div> 
                    </div>

                    <div class="fila_buscar">
                        <div class="label_buscar_largo">Categoria: </div>
                        <div class="select_buscar">
                            <select>
                                <option value="volvo">PPPPPPP</option>
                                <option value="saab">dsadsadsa</option>
                                <option value="mercedes">dssad</option>
                                <option value="audi">dsadsa</option>
                            </select>
                        </div>
                    </div>

                    <div class="fila_buscar">
                        <div class="label_buscar_corto">Sexo: </div>
                        <div class="select_buscar">
                            <select>
                                <option value="volvo">Hembra</option>
                                <option value="saab">Macho</option>
                            </select>
                        </div> 
                    </div>


                    <div class="fila_buscar">
                        <div class="button_buscar">
                            <button> Buscar</button>
                        </div>
                    </div>




                </div>



                <div class="SECC_op_menu parte_der">
                    <div id="registrar"  style=""><a>Registrarse</a></div>
                </div>
                <div class="SECC_op_menu parte_der">
                    <div id = "login"  style=""><a>Ingresar</a></div>
                </div>

                <div class="SECC_op_menu parte_izq">
                    <div><a>Inicio</a></div>
                </div>

                <div class="SECC_op_menu parte_izq">
                    <div id="buscar"><a>Buscar</a></div>
                </div>

            </div>

            <div class="block_body">
                <div class="menu_v">
                    <div class="SEC_menu_v">
                        <div class="titulo">Ver</div>
                        <div class="resto">
                            <div class="opc_menu_v"><a>Perdidos</a></div>
                            <div class="opc_menu_v"><a>Encontrados</a></div>
                            <div class="opc_menu_v"><a>Adopcion</a></div>
                            <div class="opc_menu_v"><a>Busco Novio</a></div>
                            <div class="opc_menu_v"><a>Busco Novia</a></div>
                        </div>
                    </div>

                    <div class="SEC_menu_v">
                        <div class="titulo">Donde Recurrir</div>
                        <div class="resto">
                            <div class="opc_menu_v"><a>Veterinarias</a></div>
                            <div class="opc_menu_v"><a>Hogares de Transito</a></div>
                            <div class="opc_menu_v"><a>ONG</a></div>
                        </div>
                    </div>
                </div>
                <?php echo $content_for_layout ?>
            </div>			

            <div class="block_pie">

            </div>

        </div>




        <script type="text/javascript">
            $(document).ready(function(){
				
                $("#registrar").live("click", function(){
                    $("#wrap").fadeTo(200, 0.2);
                    $.blockUI({
                        message: $('#reg_usuario'),
                        css: { 
                            padding:        '0 1% 1% 1%', 
                            margin:         '0 auto auto 25%', 
                            width:          '50%',
                            //height:      	'60%',
                            top:            '5%',
                            left:            '0%',
                            textAlign:      'center', 
                            color:          '#000', 
                            border:         '3px solid #aaa', 
                            backgroundColor: '#ECE180',
                            overflow: 'auto',
                            cursor: 'pointer'
                        }
                    });
                });
				
                $("#cancelar_reg").live("click", function(){
                    $.unblockUI();
                    $("#wrap").fadeTo(200, 1);
                    return false;
                });
                /************************* Mostrar error en el login ****************************************************************/

                $(".button_login").live("click", function(){
                    $("#error_login").fadeTo(1000, 1);					
                    $("#error_login").attr("style","display: block");
					
                });
				
                /************************* Efectos Menu LOGIN ************************************************************************/

                $("#login a").live("click", function(){
                    if ($(this).html() == "Ocultar"){
                        $("#bloque_login").attr("style","display: none");
                        $(this).parent().attr("style","background:''");
                        $(this).html("Ingresar");
                    }else{
                        $("#bloque_login").attr("style","display: block");
                        $(this).parent().attr("style","background: #ECE180; border: 1px double #000;border-bottom: none;");
                        $(this).html("Ocultar");
                    }
                });
				
                /************************* Efectos menu buscar *****************************************/
				
                $("#buscar a").live("click", function(){
                    if ($(this).html() == "Ocultar"){
                        $("#bloque_buscar").attr("style","display: none");
                        $(this).parent().attr("style","background:''");
                        $(this).html("Buscar");
                    }else{
                        $("#bloque_buscar").attr("style","display: block");
                        $(this).parent().attr("style","background: #ECE180; border: 1px double #000;border-bottom: none;");
                        $(this).html("Ocultar");
                    }
                });

				
                /************************* Clock afuera y sale del bloque login *****************************************/				
				
                $(".container_16").click(function(){
                    $("#bloque_login").attr("style","display: none");
                    $("#login a").parent().attr("style","background:''");
                    $("#login a").html("Ingresar");
                });
				
            });
	
        </script>

    </body>
</html>	